<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>用户信息</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }

        .layui-input-block {
            margin-left: 80px;
        }

        .layui-form-label {
            width: 70px;
            padding: 9px 0px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <form method="post" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">选择父字典</label>
            <div class="layui-input-block">
                <input id="parentName" type="text" readonly th:value="${parentName}"
                       placeholder="未选择为父级字典" class="layui-input" style="width:80%;float:left;">
                <button type="button" class="layui-btn layui-bg-gray" id="parent-clear" style="width:18%;float:right;">清除</button>
            </div>
            <div class="layui-hide">
                <input id="parentId" placeholder="隐藏的父菜单id" value="0" name="parentId"
                       th:value="${dictionaries?.parentId}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数据名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required|username" th:value="${dictionaries?.name}"
                       lay-reqtext="数据名称不能为空" placeholder="请输入数据名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数据值</label>
            <div class="layui-input-block">
                <input type="text" name="value" lay-verify="required" th:value="${dictionaries?.value}"
                       lay-reqtext="数据名称不能为空" placeholder="请输入数据值" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数据类型</label>
            <div class="layui-input-block">
                <input type="text" id="type" name="type" th:value="${dictionaries?.type==null?'title':dictionaries?.type}"
                       disabled="disabled" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
                <input type="number" name="permission" th:value="${dictionaries?.permission==null?'-1':dictionaries?.permission}"
                       placeholder="请输入权限" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="describe" th:value="${dictionaries?.describe}" class="layui-input">
            </div>
        </div>
        <div class="layui-hide">
            <button lay-submit id="save" type="button" lay-filter="save">确认</button>
        </div>
    </form>
</div>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        var $ = layui.$;

        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '名称不能有特殊字符';
                }

                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '名称首尾不能出现下划线\'_\'';
                }

                if (/^\d+\d+\d$/.test(value)) {
                    return '名称不能全为数字';
                }
            }
        });

        var parentName = $("#parentName");
        var parentId = $("#parentId");
        var type = $("#type");
        parentName.click(function () {
            var open = layer.open({
                title: '选择父字典',
                type: 2,
                shadeClose: true,
                scrollbar: false,
                area: ['90%', '90%'],
                btn: ['确定', '取消'],
                btnAlign: 'c',
                content: '/dictionaries/parent',
                yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    var rdata = iframeWin.layui.table.checkStatus('dictionariesTableId').data[0];
                    //获取父字典id
                    parentId.val(rdata.id);
                    //获取父字典名称
                    parentName.val(rdata.name);
                    //获取父字典类型
                    type.val(rdata.value);

                    layer.close(index);
                }
            });
        });

        $("#parent-clear").click(function () {
            parentId.val('0');
            parentName.val('');
            type.val('title');
        });

    });
</script>
</body>
</html>